<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>割叶机远程控制系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #2c3e50, #34495e);
            color: white;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .status-badge {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: bold;
            margin: 10px 5px;
        }
        
        .status-online {
            background: #27ae60;
        }
        
        .status-offline {
            background: #e74c3c;
        }
        
        .grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(10px);
        }
        
        .card-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 15px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 10px;
        }
        
        .video-container {
            background: #000;
            border-radius: 10px;
            overflow: hidden;
            aspect-ratio: 4/3;
        }
        
        .video-stream {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .sensor-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 10px;
        }
        
        .sensor-item {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }
        
        .sensor-label {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        
        .sensor-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #3498db;
        }
        
        .control-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .control-item {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 8px;
        }
        
        .control-label {
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            width: 100%;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #2980b9;
        }
        
        button.danger {
            background: #e74c3c;
        }
        
        button.danger:hover {
            background: #c0392b;
        }
        
        button.success {
            background: #27ae60;
        }
        
        button.success:hover {
            background: #229954;
        }
        
        input[type="range"] {
            width: 100%;
            margin: 10px 0;
        }
        
        .range-value {
            text-align: center;
            font-weight: bold;
            margin-top: 5px;
        }
        
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚜 割叶机远程控制系统</h1>
            <span id="status-rk3588" class="status-badge status-offline">RK3588离线</span>
            <span id="status-video" class="status-badge status-offline">视频离线</span>
            <span id="status-modbus" class="status-badge status-offline">Modbus离线</span>
        </div>

        <div class="grid">
            <!-- 视频区 -->
            <div class="card">
                <div class="card-title">📹 实时视频</div>
                <div class="video-container">
                    <img id="video-stream" class="video-stream" src="/video_proxy">
                </div>
            </div>

            <!-- 传感器数据 -->
            <div class="card">
                <div class="card-title">📊 传感器数据</div>
                <div class="sensor-grid">
                    <div class="sensor-item">
                        <div class="sensor-label">发电机电压</div>
                        <div class="sensor-value" id="voltage">--V</div>
                    </div>
                    <div class="sensor-item">
                        <div class="sensor-label">发电机电流</div>
                        <div class="sensor-value" id="current">--A</div>
                    </div>
                    <div class="sensor-item">
                        <div class="sensor-label">有功功率</div>
                        <div class="sensor-value" id="power">--W</div>
                    </div>
                    <div class="sensor-item">
                        <div class="sensor-label">发电机温度</div>
                        <div class="sensor-value" id="gen-temp">--°C</div>
                    </div>
                    <div class="sensor-item">
                        <div class="sensor-label">发动机温度</div>
                        <div class="sensor-value" id="eng-temp">--°C</div>
                    </div>
                    <div class="sensor-item">
                        <div class="sensor-label">油箱液位</div>
                        <div class="sensor-value" id="fuel">--%</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="card">
            <div class="card-title">🎮 控制面板</div>
            <div class="control-panel">
                <!-- 远程控制权限 -->
                <div class="control-item">
                    <div class="control-label">控制权限</div>
                    <button class="success" onclick="sendControl('control_authority', 1)">开启远程控制</button>
                </div>

                <!-- 发电机控制 -->
                <div class="control-item">
                    <div class="control-label">发电机</div>
                    <button onclick="sendControl('generator', 1)">启动</button>
                    <button class="danger" style="margin-top: 10px;" onclick="sendControl('generator', 2)">停机</button>
                </div>

                <!-- 割叶机控制 -->
                <div class="control-item">
                    <div class="control-label">割叶机</div>
                    <button class="success" onclick="sendControl('cutter', 1)">启动</button>
                    <button class="danger" style="margin-top: 10px;" onclick="sendControl('cutter', 0)">停止</button>
                </div>

                <!-- 喷水控制 -->
                <div class="control-item">
                    <div class="control-label">喷水系统</div>
                    <button onclick="sendControl('spray_water', 1)">开启</button>
                    <button class="danger" style="margin-top: 10px;" onclick="sendControl('spray_water', 0)">关闭</button>
                </div>

                <!-- 转向控制 -->
                <div class="control-item">
                    <div class="control-label">转向控制 (<span id="steering-value">0</span>)</div>
                    <input type="range" id="steering" min="-12" max="12" value="0" oninput="updateSteering(this.value)">
                    <button onclick="sendSteering()">应用转向</button>
                </div>

                <!-- 行进控制 -->
                <div class="control-item">
                    <div class="control-label">行进控制 (<span id="movement-value">0</span>)</div>
                    <input type="range" id="movement" min="-25" max="25" value="0" oninput="updateMovement(this.value)">
                    <button onclick="sendMovement()">应用行进</button>
                </div>

                <!-- 速度百分比 -->
                <div class="control-item">
                    <div class="control-label">速度百分比 (<span id="speed-value">0</span>%)</div>
                    <input type="range" id="speed" min="0" max="50" value="0" oninput="updateSpeed(this.value)">
                    <button onclick="sendSpeed()">应用速度</button>
                </div>

                <!-- 制冷控制 -->
                <div class="control-item">
                    <div class="control-label">制冷系统</div>
                    <button onclick="sendControl('cooling', 1)">开启</button>
                    <button onclick="sendControl('cooling', 2)" style="margin-top: 5px;">自动</button>
                    <button class="danger" style="margin-top: 5px;" onclick="sendControl('cooling', 0)">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let socket = null;
        
        // 初始化WebSocket
        document.addEventListener('DOMContentLoaded', function() {
            socket = io();
            
            socket.on('connect', function() {
                console.log('✅ WebSocket连接成功');
            });
            
            socket.on('system_update', function(data) {
                updateStatus(data);
            });
            
            socket.on('heartbeat', function(data) {
                updateStatus(data);
            });
            
            socket.on('sensor_update', function(data) {
                updateSensorDisplay(data);
            });
            
            socket.on('control_ack', function(data) {
                console.log('控制确认:', data);
                alert(`控制${data.action}: ${data.success ? '成功' : '失败'}`);
            });
        });
        
        // 更新状态显示
        function updateStatus(data) {
            document.getElementById('status-rk3588').textContent = data.rk3588_connected ? 'RK3588在线' : 'RK3588离线';
            document.getElementById('status-rk3588').className = data.rk3588_connected ? 'status-badge status-online' : 'status-badge status-offline';
            
            document.getElementById('status-video').textContent = data.video_ok ? '视频正常' : '视频离线';
            document.getElementById('status-video').className = data.video_ok ? 'status-badge status-online' : 'status-badge status-offline';
            
            document.getElementById('status-modbus').textContent = data.modbus_ok ? 'Modbus正常' : 'Modbus离线';
            document.getElementById('status-modbus').className = data.modbus_ok ? 'status-badge status-online' : 'status-badge status-offline';
        }
        
        // 更新传感器显示
        function updateSensorDisplay(data) {
            document.getElementById('voltage').textContent = (data.voltage || 0) + 'V';
            document.getElementById('current').textContent = (data.current || 0) + 'A';
            document.getElementById('power').textContent = (data.power || 0) + 'W';
            document.getElementById('gen-temp').textContent = (data.generator_temp || 0) + '°C';
            document.getElementById('eng-temp').textContent = (data.engine_temp || 0) + '°C';
            document.getElementById('fuel').textContent = (data.fuel_level || 0) + '%';
        }
        
        // 发送控制指令
        function sendControl(action, value) {
            socket.emit('send_control', {action: action, value: value});
            console.log(`发送控制: ${action} = ${value}`);
        }
        
        // 转向控制
        function updateSteering(value) {
            document.getElementById('steering-value').textContent = value;
        }
        
        function sendSteering() {
            const value = parseInt(document.getElementById('steering').value);
            sendControl('steering', value);
        }
        
        // 行进控制
        function updateMovement(value) {
            document.getElementById('movement-value').textContent = value;
        }
        
        function sendMovement() {
            const value = parseInt(document.getElementById('movement').value);
            sendControl('movement', value);
        }
        
        // 速度控制
        function updateSpeed(value) {
            document.getElementById('speed-value').textContent = value;
        }
        
        function sendSpeed() {
            const value = parseInt(document.getElementById('speed').value);
            sendControl('speed_percent', value);
        }
    </script>
</body>
</html>

